import tunnelList from '../../assets/partials/tunnel-list.html'
import BootstrapDialog from 'bootstrap3-dialog';
import './tunnel-create';

let tunnelTable;

$.destoryTunnel = function destoryTunnel(tunnelId) {
    $.myAjax({
        url: "tunnel/destoryTunnel.do",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
            tunnelId: tunnelId
        }),
        success: function(result) {
            var table = tunnelTable.DataTable();
            table.draw();
        }
    });
}

$.getTunnelList = function getTunnelList(sn) {

    $.dialogShow({
        title: "隧道列表",
        size: BootstrapDialog.SIZE_WIDE,
        message: $("<div>").html(tunnelList),
        onshown: function(dialog) {
            let body = dialog.getModalBody()[0];

            let $tunnelService = $(body).find("#tunnelService");
            $tunnelService.on('change', {
                dialog: dialog
            }, function(event) {
                var tunnelService = $(this).val();
                if (tunnelService == 'CUSTOM') {
                    $(body).find("#tunnelServiceCustom").show();
                } else {
                    $(body).find("#tunnelServiceCustom").hide();
                }
            });

            var $createTunnelBtn = $(body).find("#createTunnel");

            $createTunnelBtn.on('click', {
                dialog: dialog
            }, function(event) {
                var tunnelService = $(body).find("#tunnelService").val();
                $.createTunnel(sn, tunnelService, function() {
                    let dataTable = tunnelTable.DataTable();
                    dataTable.draw();
                });
            });

            tunnelTable = $(body).find('#tunnelList');

            tunnelTable.dataTable({
                "dom": 'rt<"clearfix table-bottom"ilp>',
                "searching": false,
                "ordering": false,
                "serverSide": true,
                "processing": true,
                "language": {
                    'emptyTable': '当前暂无数据',
                    'info': '第 _PAGE_ 页 / 总 _PAGES_ 页，',
                    'infoEmpty': '',
                    'lengthMenu': '每页 _MENU_ ',
                    "paginate": {
                        "first": "第一页",
                        "last": "最后一页",
                        "next": "下一页",
                        "previous": "上一页"
                    }
                },
                "pagingType": "full_numbers",
                "columns": [{
                        "data": "remoteService"
                    },
                    {
                        "data": "localHost"
                    },
                    {
                        "data": "localPort"
                    },
                    {
                        "data": "remoteClient"
                    },
                    {
                        "data": "tunnelStatus"
                    },
                    {
                        "render": function(data, type, row) {
                            let html = "";
                            switch (row.tunnelStatus) {
                                case "ESTABLISHED":
                                    html = "<a onclick='$.destoryTunnel(" + row.id + ")'>关闭隧道</a>"
                                    break;
                                default:

                            }
                            return html;
                        }
                    }
                ],
                "ajax": function(data, callback, settings) {
                    var pageSize = data.length;
                    var page = data.start / pageSize + 1;
                    data.pageSize = pageSize;
                    data.page = page;
                    data.sn = sn;
                    $.myAjax({
                        url: "tunnel/getTunnelList.do",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify(data),
                        success: function(result) {
                            result.recordsTotal = result.total;
                            result.recordsFiltered = result.total;
                            return callback(result);
                        }
                    });
                }
            });

        }
    });
}
